<template>
    <div>
        <el-tabs v-model="activeTab" type="border-card">
            <el-tab-pane name="all" :label="`全部 (${orderNumber.all})`"></el-tab-pane>
            <el-tab-pane name="unassigned" :label="`未分配 (${orderNumber.unAssign})`"></el-tab-pane>
            <el-tab-pane name="assigned" :label="`已分配 (${orderNumber.assigned})`"></el-tab-pane>
            <OrderInfo :type="activeTab" @sendData="handleTable"></OrderInfo>
        </el-tabs>
    </div>
</template>

<script setup lang="ts" name="orderDefault">
import OrderInfo from '@/components/OrderInfo.vue';
import { reactive, ref } from 'vue';
import { emitter } from '@/utils/emitter';
interface orderNumberType{
    all: number,
    assigned: number,
    unAssign: number
}
const activeTab = ref<'all' | 'unassigned' | 'assigned'>('all') // 默认激活第一个标签页
const orderNumber = reactive<orderNumberType>({
    all: 0,
    assigned: 0,
    unAssign: 0
})
//重新计算
const handleTable = (data: any) => {
    const all = data.length
    const assigned = data.reduce((acc:number, item:any) =>  (item.arrivalTime && item.serviceStaff ? acc + 1 : acc), 0)
    const unAssign = all - assigned
    const obj = {
        all,
        assigned,
        unAssign
    }
    Object.assign(orderNumber, obj)
}
emitter.on('upDateTab', () => {
    orderNumber.unAssign--
    orderNumber.assigned++
})
</script>

<style scoped>

</style>